import { dataTool } from 'echarts'
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import s from './style.module.less'
import { useStore, observer } from '@/store'


const Card = () => {
  const { homeStore } = useStore()
  const navigate = useNavigate()
  const goDetail = () => {
    navigate('housedetail')
  }
  // useEffect(()=>{
    // console.log(homeStore.arr);
  // },[])

  console.log(homeStore.arr);

  return (
    <div style={{
      display:'flex',
      justifyContent:'center',
      flexWrap:'wrap'
    }}>
      {
        homeStore.arr.map((item, index) => {
          return <div key={index} className={s.main} onClick={() => goDetail()}>
            <div className={s.img}>
              <img src={item.picture} alt="" />
            </div>
            <div className={s.title}>{item.des}</div>
            <div className={s.size}>
              <div className={s.house}>{item.houseType}</div>|
              <div className={s.area}>{item.area}</div>|
              <div className={s.location}>{item.forward}</div>
            </div>
            <div className={s.tabs}>
              <div className={s.tab}>{item.tab}</div>
            </div>
            <div className={s.price}>
              <div className={s.num}>{item.price}万</div>
              <div className={s.aver}>{item.avePrice}元/米</div>
            </div>
            <div className={s.botton}>
              <div className={s.line}></div>
              <div className={s.words}>户型利用率高</div>
            </div>
          </div>
        })
      } 
    </div>


  )
}
export default observer(Card)